<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select name="" id="province" >
        <option value="0">--请选择省份--</option>
    </select>
    <select name="" id="city">
        <option value="0">--请选择城市--</option>
    </select>
    <script>
        var jiangsu = {
            id: 1001,
            name: "江苏省",
            cities: [
                {
                    id: 1,
                    name: "南京市"
                },
                {
                    id: 2,
                    name: "苏州市"
                },
                {
                    id: 3,
                    name: "无锡市"
                },
                {
                    id: 4,
                    name: "扬州市"
                },

            ]
        };
        var guangdong = {
            id: 1002,
            name: "广东省",
            cities: [
                {
                    id: 1,
                    name: "深圳市"
                },
                {
                    id: 2,
                    name: "潮州市"
                },
                {
                    id: 3,
                    name: "汕头市"
                },
                {
                    id: 4,
                    name: "东莞市"
                },

            ]
        };
        var shandong = {
            id: 1003,
            name: "山东省",
            cities: [
                {
                    id: 1,
                    name: "青岛市"
                },
                {
                    id: 2,
                    name: "日照市"
                },
                {
                    id: 3,
                    name: "济南市"
                },
                {
                    id: 4,
                    name: "枣庄市"
                },

            ]
        };

        var provinces=[jiangsu,guangdong,shandong];
        var province=document.getElementById("province");
        var city=document.getElementById("city");
        for(var i=0;i<provinces.length;i++){
            // console.log(provinces[i]);//单个省份对象
            var option=new Option(provinces[i].name,provinces[i].id);
            province.add(option);
        }
        province.onchange=function(){
            city.length=1;//清空城市的下拉列表，保留1条
            var index=this.selectedIndex;//获取当前选中项的索引值
            if(index!=0){
                var rightPro=provinces[index-1];//找到正确的省份
                var cities=rightPro.cities;//找到对应的省份所对应的城市
                for(var i=0;i<cities.length;i++){
                    // console.log(cities[i]);//对应的城市对象
                    var option=new Option(cities[i].name,cities[i].id);
                    city.add(option);
                }   
            }
           
        };

    </script>
</body>

</html>